<template>
    <div class="box">
        <div class="L-login">
            <a href="javascript:;">
                <img v-back src="./img/goBack.png" alt="goBack.png">
            </a>
            登录
            <router-link to="./register" class="L-register">注册</router-link>
        </div>
        <div class="L-main">
            <form action="#" class="L-form">
                <div>
                    <label>
                        <span>会员名</span>
                        <input type="text" v-model="username" placeholder="请输入手机号或邮箱">
                    </label>
                </div>
                <div>
                    <label>
                        <span>密码</span>
                        <input type="password" v-model="password" placeholder="请输入密码">
                    </label>
                </div>
                <div class="L-forget-pws">
                    <a href="#">忘记密码？</a>
                </div>
                <div class="L-lgn" id="L-lgn" @click="login">登录</div>
            </form>
            <div class="L-title">
                <span>更多第三方登录</span>
            </div>
            <div class="L-select">
                <a href="#1">
                    <img src="./img/login_wechat.png" alt="login_wechat.png">
                </a>
                <a href="#2">
                    <img src="./img/login_sina.png" alt="login_sina.png">
                </a>
                <a href="#3">
                    <img src="./img/login_qq.png" alt="login_qq.png">
                </a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "loginPage",
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      let url = this.$api + "/login";
      let login = this.check();
      if (login) {
        this.axios
          .post(url, {
            username: this.username,
            password: this.password
          })
          .then(res => {
            if (res.data.status === 2) {
              console.log(res.data.msg);
            }
            if (res.data.status === 1) {
              this.$router.push({ path: "/index" });
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    check() {
      let username = this.username;
      let regU = /^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/;
      let isCheck = regU.test(username);
      if (!isCheck) {
        console.log("用户名输入有误");
        return false;
      }
      return true;
    }
  }
};
</script>

<style scoped lang="less">
@import url("./css/login.less");
</style>